<template>
  <el-card
    class="box-construction"
    shadow="always"
    :style="`height:${Height}px`"
    v-loading="loading"
  >
    <div class="box-title box-title-position">
      <div>考核单生成</div>
    </div>
    <el-row :gutter="20" style="margin: 20px">
      <el-col :span="9" :offset="4">
        <el-date-picker
          v-model="dateVal"
          value-format="yyyy-MM"
          type="month"
          placeholder="请选择月份"
        ></el-date-picker>
      </el-col>
      <el-col :span="10">
        <el-button
          class="add-btn"
          size="medium"
          type="primary"
          @click="checkJX()"
          >一键生成</el-button
        >
        <el-button
          class="add-btn"
          size="medium"
          type="primary"
          @click="submitLock()"
          >锁定考核内容</el-button
        >
        <!-- <el-button
          size="medium"
          type="primary"
          icon="el-icon-download"
          :loading="exportTable.loading"
          @click="exportExcelMonth()"
          >导出</el-button
        > -->
        <el-button
          :loading="downLoading"
          icon="el-icon-download"
          size="medium"
          type="primary"
          @click="exportDatas()"
          >导出</el-button
        >
      </el-col>
    </el-row>
    <el-tabs type="border-card" class="border-card" @tab-click="tabClick">
      <el-tab-pane v-for="tab in tabPhoe" :label="tab" :key="tab">
        <el-row :gutter="20" v-if="tableData.length > 0">
          <el-col v-for="i in tableData" :span="4" :key="i.month"
            ><div class="grid-content">{{ i.month }}</div></el-col
          >
        </el-row>
        <div v-else class="no-data">暂无数据</div>
        <el-pagination
          class="box-page"
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pagination.currentPage"
          :page-size="pagination.pageSize"
          layout="prev, pager, next"
          :total="pagination.total"
        ></el-pagination>
      </el-tab-pane>
    </el-tabs>
    <CheckTable
      v-if="visible"
      ref="checkTable"
      title="考核标准预览"
      :datas.sync="dateVal"
      :visible.sync="visible"
      @saveForm="submit"
    />
  </el-card>
</template>
<script>
import staNewAPI from "@apis/statisticsNew";
import baseURL from "@utils/upLoadBaseUrl";
import CheckTable from "./checkTable";
import perAPI from "@apis/performance";
import { mapState } from "vuex";
export default {
  data() {
    return {
      visible: false,
      activeTab: "0",
      loading: false,
      dateVal: "",
      tabPhoe: ["考核单", "锁定情况"],
      tableData: [],
      pagination: {
        currentPage: 1,
        pageNo: 1,
        pageSize: 30,
        total: 0,
      },

      baseURL: baseURL.base1,
      downLoading: false,
    };
  },
  components: {
    CheckTable,
  },
  computed: {
    ...mapState({
      userInfo: "auth",
    }),
    Height() {
      return document.documentElement.clientHeight - 110;
    },
  },
  created() {
    this.uid = this.userInfo.user.review_id;
    this.loading = true;
    this.getLists(1);
  },
  mounted() {},
  methods: {
    getLists(val) {
      let URL = this.activeTab == 0 ? perAPI.getKHlist : perAPI.getSDlist;
      URL({ pageNo: val, pageSize: this.pagination.pageSize })
        .then((res) => {
          this.tableData = [...res.data];
          this.pagination = {
            currentPage: res.current_page,
            pageNo: res.current_page,
            pageSize: res.per_page,
            total: res.total,
          };
          this.loading = false;
        })
        .catch((err) => {
          if (err.data.code) {
            this.$message.error(err.message);
          }
          this.loading = false;
        });
    },
    handleCurrentChange(val) {
      this.loading = true;
      this.getLists(val);
    },
    tabClick(val) {
      this.activeTab = val.index;
      this.loading = true;
      this.getLists(1);
    },
    //绩效生成
    checkJX() {
      if (!this.dateVal) {
        this.$message.warning("请先选择月份");
        return;
      }
      this.visible = true;
    },
    submit() {
      this.loading = true;
      perAPI
        .createReview(this.dateVal)
        .then((res) => {
          this.$refs.checkTable.close();
          this.$message.success("操作成功");
          this.getLists(1);
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err.message);
        });
    },
    //绩效锁定
    submitLock() {
      if (!this.dateVal) {
        this.$message.warning("请先选择月份");
        return;
      }
      this.loading = true;
      perAPI
        .lockReivewResult(this.dateVal)
        .then((res) => {
          this.$message.success("操作成功");
          this.getLists(1);
          this.lockedData();
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err.message);
        });
    },
    //锁定后生成数据
    lockedData() {
      staNewAPI
        .getStatisticGenerateQyScore(this.dateVal)
        .then()
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    //导出
    exportDatas() {
      // console.log(this.baseURL, "baseURL");
      if (!this.dateVal) {
        this.$message.warning("请先选择月份");
        return;
      }
      this.downLoading = true;
      let a = document.createElement("a");
      a.href = `${this.baseURL}/statistic/exportMonthScore/${this.dateVal}`;
      // 将文件流转换为excel, excel文件名以当前下载时间命名
      // a.download = `考评名单${this.dateVal}.xls`;
      a.target = "_blank";
      if (document.all) {
        a.click();
      } else {
        let evt = document.createEvent("MouseEvents");
        evt.initEvent("click", true, true);
        a.dispatchEvent(evt);
      }
      setTimeout(() => {
        this.downLoading = false;
      }, 1500);
    },
  },
};
</script>
<style lang="scss" scoped>
.grid-content {
  border-radius: 4px;
  margin-bottom: 15px;
  height: 40px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 40px;
}
.border-card {
  min-height: 100px;
  .box-page {
    text-align: right;
    padding-top: 40px;
  }
}
.no-data {
  color: #909399;
  text-align: center;
  font-size: 14px;
}
</style>